---
title: "Justify Items"
description: "Utilities for controlling how grid items are aligned along their inline axis."
---

import plugin from 'tailwindcss/lib/plugins/justifyItems'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Start

Use `justify-items-start` to justify grid items against the start of their inline axis:

```html indigo
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-start h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">6</div>
  </div>
</template>

<div class="grid **justify-items-start** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## End

Use `justify-items-end` to justify grid items against the end of their inline axis:

```html lightBlue
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-end h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">6</div>
  </div>
</template>

<div class="grid **justify-items-end** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Center

Use `justify-items-center` to justify grid items along their inline axis:

```html amber
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-center h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">6</div>
  </div>
</template>

<div class="grid **justify-items-center** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Stretch

Use `justify-items-stretch` to stretch items along their inline axis:

```html fuchsia
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-stretch h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">6</div>
  </div>
</template>

<div class="grid **justify-items-stretch** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Responsive

To justify flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:justify-items-center` to apply the `justify-items-center` utility at only medium screen sizes and above.

```html
<div class="justify-items-start md:justify-items-center">
  <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Variants

<Variants plugin="justifyItems" name="justify-items" />

### Disabling

<Disabling plugin="justifyItems" name="justify-items" />
